<template>
  <div class="main">
    <QuestionItem v-if="qaListDataArr.list.length" :list="qaListDataArr.list" @closeFn="closeQuestionBox"/>
    <button v-if="qaListDataArr.total > qaListDataArr.list.length"
      class="load-more ftz16"
      @click="loadMore">
    <template v-if="qaListDataArr.isLoadingMore">
      <i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop ftz20'></i>
      <span>正在加载，请稍候......</span>
    </template>
    <span v-else>点击加载更多...</span>
    </button>
  </div>
</template>

<script type="text/ecmascript-6">
import QuestionItem from '@/components/questionAnswer/question-item'
import {
  myFollowQuestion
} from '@/service/api'
export default {
  data () {
    return {
      searchData: {
        pageSize: 1,
        pageNum: 1
      },
      qaListDataArr: {
        list: [],
        total: 0,
        isLoadingMore: false
      }
    }
  },
  components: {
    QuestionItem
  },
  mounted () {
    this.$nextTick(() => {
      this.showLoadingModal()
      this.initDataList()
    })
  },
  methods: {
    showLoadingModal () {
      if (window.layer) {
        this.layerLoad = window.layer.load(0, {
          shade: false
        })
      }
    },
    closeLoadingModal () {
      if (window.layer) {
        window.layer.close(this.layerLoad)
      }
    },
    /**
     * 初始化页面数据，多个ajax同时请求
     */
    initDataList () {
      this.searchData.pageNum = 1
      Promise.all([
        this.getQAList()
      ]).then((res) => {
        this.closeLoadingModal()
        // 问答列表
        let qaData = res[0]
        this.qaListDataArr.list = []
        if (qaData.status === 200) {
          this.qaListDataArr.total = qaData.data.total
          this.qaListDataArr.list = qaData.data.list
        }
      }).catch((e) => {
        console.log(e)
      })
    },
    // 问答列表
    async getQAList () {
      let list = await myFollowQuestion(this.searchData)
      return list
    },
    closeQuestionBox () {},
    loadMore () {
      this.qaListDataArr.isLoadingMore = true
      this.searchData.pageNum++
      this.getQAList().then((res) => {
        if (res.data) {
          this.qaListDataArr.list.push(...res.data.list)
        } else {
          this.searchData.pageNum--
          window.layui.layer.msg('数据加载失败，请重新加载')
        }
        this.qaListDataArr.isLoadingMore = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.main {
  padding: 0 30px;
}
</style>
